<template>
  <div class="comment-container">
    <div class="main-info-title fs18 flex flex-row-center">
      <span>意见反馈</span>
    </div>
    <HHsearch
      ref="search"
      :search-options="searchOptions"
      :btn-option="2"
      @search="search"
      @reset="reset"
      @export="handleExport"
    ></HHsearch>
    <HHtable
      ref="table"
      :border="true"
      :total="total"
      :table-column="tableColumn"
      :btn-option="btnOption"
      :table-data="tableData"
      @page-click="pageClick"
    >
      <!-- 意见反馈 -->
      <template #content1="{ data }">
        <el-tooltip
          v-if="data.content.length > 45"
          class="item"
          effect="dark"
          placement="right-start"
        >
          <div slot="content" style="max-width: 500px">
            {{ data.content }}
          </div>
          <div class="clamp">{{ data.content }}</div>
        </el-tooltip>
        <div v-else class="clamp">{{ data.content }}</div>
      </template>

      <!-- 图片 -->
      <template #img="{ data }">
        <el-image
          v-for="(item, index) in data.imgList"
          :key="index"
          style="width: 50px; height: 50px; margin-left: 10px"
          :src="item"
          fit="cover"
        ></el-image>
      </template>
    </HHtable>
  </div>
</template>

<script>
  import HHsearch from '@/components/HH-search'
  import HHtable from '@/components/HH-table'
  import { feedbackList, deleteFeedback } from '@/api/comment'
  export default {
    components: {
      HHsearch,
      HHtable,
    },
    data() {
      return {
        total: 0,
        params: {
          pageNum: 1,
          pageSize: 10,
          contact: '',
          username: '',
        },
        searchOptions: [
          {
            type: 'text',
            prop: 'username',
            span: 6,
            label: '姓名：',
            placeholder: '请输入搜索',
          },
          {
            type: 'text',
            prop: 'contact',
            label: '电话：',
            span: 6,
            placeholder: '请输入搜索',
          },
        ],
        tableColumn: [
          {
            prop: 'username',
            label: '姓名',
          },
          {
            // prop: "content",
            label: '意见反馈',
            slotContent: 'content1',
          },
          {
            label: '图片',
            slotContent: 'img',
          },
          {
            prop: 'contact',
            label: '联系方式',
          },
        ],
        tableData: [],
        btnOption: [
          {
            type: 'danger',
            size: 'mini',
            text: '删除',
            show: true,
            func: this.delete,
          },
        ],
      }
    },
    mounted() {
      this.initData()
    },
    methods: {
      initData() {
        this.getFeedbackList()
      },
      getFeedbackList() {
        this.$refs.table.loading = true
        feedbackList(this.params).then((res) => {
          if (res.code === 200) {
            this.total = res.data.total
            this.tableData = res.data.result
            setTimeout(() => {
              this.$refs.table.loading = false
            }, 1000)
          } else {
            this.$refs.table.loading = false
          }
        })
      },
      search(res) {
        const arr = Object.keys(res)
        for (let i = 0; i < arr.length; i++) {
          this.params[arr[i]] = res[arr[i]]
        }
        this.initData()
      },
      reset() {
        this.params = {
          pageNum: 1,
          pageSize: 10,
          contact: '',
          username: '',
        }
        this.$refs.search.removeFilterArray()
        this.initData()
      },
      handleExport() {
        const link = document.createElement('a')
        link.style.display = 'none'
        link.href = this.baseURL + '/hce/feedback/export.do'
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      },
      delete(data) {
        const params = {
          ids: data.id,
        }
        deleteFeedback(params).then((res) => {
          if (res.code === 200) {
            this.$baseMessage('删除成功', 'success')
            this.initData()
          }
        })
      },
      pageClick(pager) {
        this.params.pageNum = pager
        this.initData()
      },
    },
  }
</script>

<style lang="scss" scoped>
  @import '../../../assets/styles/common.css';
  .comment-container {
    .main-info-title {
      position: relative;
      height: 60px;
      margin-bottom: 20px;
      border-bottom: 1px solid #eee;

      &:after {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 80px;
        height: 3px;
        content: '';
        background-color: #409eff;
        border-radius: 3px;
        transition: all 0.5s ease;
      }

      &:hover:after {
        width: 120px;
      }
    }

    .clamp {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
    }

    // .el-input,
    // .el-textarea {
    //   width: 300px;
    // }
  }
</style>
